<template>
  <div class="login-container">
    <el-form class="login-form" :model="loginForm" ref="loginForm" :rules="rules"  label-position="left"
             label-width="0px" autoComplete="on">
      <h3 class="login_title">会员登录</h3>
      <div class="login-body">
        <el-form-item prop="username">
          <el-input type="text" v-model="loginForm.hNumber" auto-complete="off" placeholder="身份证"></el-input>
          <div class="login-username" slot="prepend"></div>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.hPassword" auto-complete="off" placeholder="密码"></el-input>
          <template slot="prepend"><div class="login-password"></div></template>
        </el-form-item>
        <!--<el-checkbox class="login_remember" v-model="checked" label-position="left">记住密码</el-checkbox>-->
        <el-form-item style="width: 100%">
          <el-button type="primary" style="width: 100%" @click="log">登录</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-footer>
          默认密码：身份证号码后面6位<br>
    </el-footer>
  </div>
</template>

<script>
import { login } from '@/api/HMemberofthefile'

export default {
  data() {
    return {
      displayLoading: false,
      loginForm: {
        hNumber: '431103199203096753',
        hPassword: 'admin'
      },
      rules: {
        hNumber: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        hPassword: [{ required: true, message: '请输入口令', trigger: 'blur' }]
      }
    };
  },
  methods: {
    //错误信息
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error",
      });
    },
    log(){
      login(this.loginForm)
      .then((response) => {
          if(response.data.hId==null){
            this.outputError(error);
          }else{
              sessionStorage.setItem("is_login", response.data.hName);
              sessionStorage.setItem("is_loginID", response.data.hId);
              sessionStorage.setItem("fn", response.data.hFn);
              console.log(sessionStorage.getItem('is_login'));
              this.$router.push({
                path: '/home',
              })
          }
        })
        .catch((error) => {
          this.outputError(error);
        });
    }
  }
}
</script>

<style>
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .login_remember {
    margin: 0px 0px 35px 0px;
    text-align: left;
  }
</style>
